import React, { Component } from 'react'

import axios from 'axios'

import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'

export default class City extends Component{
    constructor(props){
        super(props)
        this.state={
            cityStyle:{
                display:'flex',
                flexDirection: 'column',
                height: '100%'
            },
            hotCities:[],
            cities:{},
            foreignCities:{}
        }
    }
    render() {
        return <div className="city" style={this.state.cityStyle}>
            <CityHeader/>
            <CitySearch cities={ this.state.cities }/>
            <CityList cities={ this.state.cities } foreignCities={ this.state.foreignCities } hotCities={ this.state.hotCities }/>
        </div>
    }
    componentWillMount() {
        axios.get('/api/city.json').then(res=>{
            res = res.data;
            if(res.ret){
                this.setState({
                    hotCities: res.data.hotCities,
                    cities: res.data.cities,
                    foreignCities: res.data.foreignCities
                })
            }
        })
    }
}